<template>
  <view class="login-container">
    <view class="login-card">
      <view class="flex justify-center">
        <u-image
          :src="logoImage"
          width="200rpx"
          mode="widthFix"
          bgColor=""
        ></u-image>
      </view>
      <u-text
        :text="`欢迎使用${appName}`"
        size="24"
        bold
        align="center"
        margin="20rpx 0 40rpx"
      ></u-text>

      <u-form
        ref="formRef"
        :model="form"
        :rules="rules"
        v-if="!showWechatLogin"
      >
        <u-form-item prop="username">
          <u-input v-model="form.username" placeholder="请输入用户名" clearable>
            <template #prefix>
              <u-icon name="account-fill" size="20"></u-icon>
            </template>
          </u-input>
        </u-form-item>

        <u-form-item prop="password">
          <u-input
            v-model="form.password"
            type="password"
            placeholder="请输入验证码"
            clearable
          >
            <template #prefix>
              <u-icon name="lock" size="20"></u-icon>
            </template>
          </u-input>
        </u-form-item>
      </u-form>

      <u-form v-if="showWechatLogin">
        <u-button
          type="primary"
          shape="circle"
          @click="handleWechatLogin"
          customStyle="margin-top: 20rpx"
        >
          微信一键登录
        </u-button>
      </u-form>

      <u-button
        v-else
        type="primary"
        shape="circle"
        @click="handleLogin"
        customStyle="margin-top: 20rpx"
      >
        登录
      </u-button>

      <view class="other-login">
        <u-text
          text="其他登录方式"
          size="14"
          color="#999"
          align="center"
        ></u-text>
        <view class="login-icons">
          <view @click="wechatLogin">
            <u-icon
              :name="showWechatLogin ? 'lock-fill' : 'weixin-circle-fill'"
              size="30"
              :color="showWechatLogin ? '#c9c9c9' : '#09BB07'"
            ></u-icon>
          </view>
        </view>
      </view>
    </view>
    <u-modal :show="roleShow" title="选择身份进入" @confirm="handleConfirmRole">
      <u-radio-group v-model="currentRole" placement="column">
        <u-radio
          v-for="role in store.state.user.userGroup"
          :key="role.id"
          :label="role.name"
          :name="role.id"
        >
        </u-radio>
      </u-radio-group>
    </u-modal>
  </view>
</template>

<script setup>
import { useStore } from "vuex";
import { computed, ref } from "vue";

const store = useStore();
const formRef = ref();
const form = ref({
  username: "",
  password: "",
});
const showWechatLogin = ref(true);

const logoImage = computed(() => {
  return store.state.isFromGlobal
    ? "/static/images/icon/logo_global.png"
    : "/static/images/icon/logo_text.png";
});

const appName = computed(() => {
  return store.state.isFromGlobal ? "全球食品饮料论坛" : "中科云采";
});

const rules = {
  username: [
    {
      required: true,
      message: "请输入用户名",
      trigger: "blur",
    },
  ],
  password: [
    {
      required: true,
      message: "请输入验证码",
      trigger: "blur",
    },
  ],
};

const roleShow = ref(false);

const currentRole = ref(0);

function wechatLogin() {
  showWechatLogin.value = !showWechatLogin.value;
}

async function handleLogin() {
  const valid = await formRef.value.validate();
  if (valid) {
    await store.dispatch("fetchPasswordLogin", form.value);
    await loginSuccessNext();
  }
}

async function handleWechatLogin() {
  // 微信一键登录逻辑
  uni.showLoading({
    title: "登录中",
  });
  uni.login({
    success: async (res) => {
      await store.dispatch("fetchWechatLogin", {
        code: res.code,
      });
      await loginSuccessNext();
    },
  });
}

async function loginSuccessNext() {
  await store.dispatch("fetchMerchtantsCurrent");
  await store.dispatch("fetchSupplierCurrent");
  if (store.state.user.isStore) {
    await store.dispatch("fetchCollectList");
    await store.dispatch("fetchDeliverList");
    if (store.state.subject.merchantSubjectList.length == 0) {
      await store.dispatch(
        "fetchMerchantSubjectList",
        store.state.user.storeInfo.id
      );
    }
  }
  uni.hideLoading();
  if (store.state.user.userGroup.length > 0) {
    currentRole.value = store.state.user.userGroup[0].id;
    store.commit("SET_CURRENT_ROLE", currentRole.value);
    roleShow.value = true;
    if (currentRole.value == 2) {
      uni.reLaunch({
        url: "/pages/supplier/statistics",
      });
    } else if (currentRole.value == 3) {
      uni.reLaunch({
        url: "/pages/agenter/statistics",
      });
    } else {
      uni.reLaunch({
        url: "/pages/index/index",
      });
    }
  } else {
    uni.reLaunch({
      url: "/pages/index/index",
    });
  }
}

function handleConfirmRole() {
  roleShow.value = false;
  store.commit("SET_CURRENT_ROLE", currentRole.value);
  if (currentRole.value == 2) {
    uni.reLaunch({
      url: "/pages/supplier/statistics",
    });
  } else if (currentRole.value == 3) {
    uni.reLaunch({
      url: "/pages/agenter/statistics",
    });
  } else {
    uni.reLaunch({
      url: "/pages/index/index",
    });
  }
}
</script>

<style lang="scss" scoped>
page {
  height: 100%;
  background-color: #f8f8f8;
}

.login-container {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40rpx;
  box-sizing: border-box;

  .login-card {
    width: 100%;
    max-width: 600rpx;
    background: #fff;
    border-radius: 20rpx;
    padding: 60rpx 40rpx;
    box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);

    .other-login {
      margin-top: 80rpx;

      .login-icons {
        display: flex;
        justify-content: center;
        margin-top: 30rpx;

        .u-icon {
          margin: 0 30rpx;
        }
      }
    }
  }
}
</style>
